<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="700px"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-form
      ref="formEdit"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="标题" prop="FormName">
        <el-input
          v-model="formData.FormName"
          maxlength="50"
          placeholder="标题"
        />
      </el-form-item>
      <el-form-item label="表单分类" prop="FormClassify">
        <treeDicItem
          v-model="formData.FormClassify"
          :dic-id="DictItemDic.formClassify"
          placeholder="表单分类"
        />
      </el-form-item>
      <el-form-item label="表单类型" prop="FormType">
        <enumItem
          v-model="formData.FormType"
          :dic-key="EnumDic.FormType"
          :readonly="id != null"
          placeholder="表单类型"
          sys-head="form"
        />
      </el-form-item>
      <el-form-item v-if="formData.FormType != 0" :label="formData.FormType == 2 ? '表名': '视图名'" prop="TableName">
        <el-input
          v-model="formData.TableName"
          :readonly="id != null"
          maxlength="50"
          placeholder="表名"
        />
      </el-form-item>
      <el-form-item v-if="formData.FormType == 1" label="所属服务组" prop="PhyGroupId">
        <el-select v-model="formData.PhyGroupId" :disabled="id != null" placeholder="所属服务组" clearable>
          <el-option v-for="item in phyGroups" :key="item.Id" :label="item.GroupName" :value="item.Id" />
        </el-select>
      </el-form-item>
      <el-form-item label="版本号" prop="Ver">
        <el-input
          v-model="formData.Ver"
          :disabled="id != null"
          maxlength="10"
          placeholder="版本号"
        />
      </el-form-item>
      <el-form-item label="说明" prop="FormShow">
        <el-input
          v-model="formData.FormShow"
          type="textarea"
          :rows="2"
          maxlength="100"
          placeholder="说明"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" style="text-align: center">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as formApi from '@/customForm/api/form'
import { DictItemDic, EnumDic } from '@/customForm/config/formConfig'
import { GetEnables } from '@/customForm/api/phyGroup'
export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: null
    },
    formClassify: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      EnumDic,
      formData: {},
      phyGroups: [],
      title: '新增表单',
      rules: {
        FormName: [
          {
            required: true,
            message: '表单标题不能为空！',
            trigger: 'blur'
          }
        ],
        FormType: [
          {
            required: true,
            message: '表单类型不能为空！',
            trigger: 'blur'
          }
        ],
        FormClassify: [
          {
            required: true,
            message: '表单分类不能为空！',
            trigger: 'blur'
          }
        ],
        TableName: [
          {
            required: true,
            message: '表名不能为空！',
            trigger: 'blur'
          }
        ],
        PhyGroupId: [
          {
            required: true,
            message: '所属服务组不能为空！',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    async initPhyGroup() {
      this.phyGroups = await GetEnables()
    },
    async reset() {
      if (this.phyGroups.length === 0) {
        this.initPhyGroup()
      }
      if (this.id != null) {
        const res = await formApi.Get(this.id)
        this.formData = {
          FormName: res.FormName,
          FormShow: res.FormShow,
          FormType: res.FormType,
          FormClassify: res.FormClassify,
          PhyGroupId: res.PhyGroupId,
          TableName: res.TableName,
          Ver: res.Ver
        }
      } else {
        this.title = '新增表单'
        this.formData = {
          FormName: null,
          FormShow: null,
          FormClassify: this.formClassify,
          PhyGroupId: null,
          TableName: null,
          FormType: 0,
          Ver: 'V1.0.0'
        }
      }
    },
    async set() {
      await formApi.Set(this.id, this.formData)
      this.$message({
        message: '更新成功!',
        type: 'success'
      })
      this.$emit('close', true)
    },
    async add() {
      this.formData.CompanyId = this.comId
      this.id = await formApi.Add(this.formData)
      this.$message({
        message: '保存成功!',
        type: 'success'
      })
      this.$emit('close', true)
    },
    save() {
      this.$refs['formEdit'].validate((valid) => {
        if (valid) {
          if (this.id == null) {
            this.add()
          } else {
            this.set()
          }
        } else {
          return false
        }
      })
    },
    closeForm() {
      this.$emit('close', false)
    }
  }
}
</script>
